<template>
  <el-row class="rowNavStyle">
    <el-col :span="24" class="colNavStyle">
      <menuButton
        @addFlowKey="buttonClick"
        @enableFlowClick="enableFlowClick"
        @closeFlowKey="closeFlowClick"
        helper-path="pages/aae246"
      ></menuButton>
    </el-col>
  </el-row>
  <el-table
    :data="tableData"
    stripe
    :border="true"
    row-key="FlowId"
    @selection-change="SelectionChange"
    default-expand-all
    v-loading="loading"
  >
    <el-table-column type="selection" width="55" />

    <!-- 动态列 -->
    <el-table-column
      show-overflow-tooltip
      v-for="itme in columns"
      :key="itme.FieldEnName"
      :prop="itme.FieldEnName"
      :label="itme.FieldCnName"
      :min-width="itme.FieldWidth"
      :sortable="itme.FieldSortable"
      :align="itme.FieldAlign"
    >
      <template v-if="itme.FieldSlot === 'DataState'" #default="DataState">
        <el-tag type="success" v-if="DataState.row.DataState === DataStateEnum.Enable"
          >启用中</el-tag
        >
        <el-tag type="warning" v-if="DataState.row.DataState === DataStateEnum.Stop"
          >关闭中</el-tag
        >
        <el-tag type="danger" v-if="DataState.row.DataState === DataStateEnum.Delete"
          >已删除</el-tag
        >
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" width="250">
      <template #default="scope">
        <dataRowButton
          :model="scope.row"
          @editFlowKey="handleEdit(scope.row)"
          @previewFlowKey="previewFlowClick(scope.row)"
          @delFlowKey="deleteFlowClick(scope.row.FlowId)"
          :key="updateKey"
        ></dataRowButton>
      </template>
    </el-table-column>
  </el-table>
  <pageLayout :pageData="page" @pageBnt="pageClick"></pageLayout>

  <designFlow
    :dialog-title="drawerModel.dialogTitle"
    :is-visibles="drawerModel.isVisibles"
    :flowId="drawerModel.flowId"
    @closeBnt="colosClick"
  ></designFlow>
  <preViewFlow
    :dialogTitle="preViewFlowModel.dialogTitle"
    :isVisibles="preViewFlowModel.isVisibles"
    :flowId="preViewFlowModel.flowId"
    @closePreBnt="closePreClick"
  ></preViewFlow>
</template>
<script lang="ts" setup>
import pageLayout from "@/components/page.vue";
import designFlow from "@/views/templateManage/flowTemplate/designFlow.vue";
import preViewFlow from "@/views/templateManage/flowTemplate/preViewFlow.vue";
import { onMounted, reactive, ref } from "vue";
import { basePageModel, pageCofing, UpdateDataStateInput } from "@/model/public/public";
import menuButton from "@/components/menuButton.vue";
import dataRowButton from "@/components/dataRowButton.vue";
import { GetMenuColsByMenuId } from "@/api/publicTool";
import { DataStateEnum } from "@/enum/public";
import { ElMessage, ElMessageBox } from "element-plus";
import { GetAllFlow, UpdateFlowDataState } from "@/api/flow";
import { FlowOutPut } from "@/model/flow";

//初始加载dom
onMounted(() => {
  GetMenuColsByMenuIdMsg();
});

//table数据
const tableData = ref<FlowOutPut[]>([]);
//更新key，刷新dom使用
const updateKey = ref(0);
// 选中项
const selectedRows = ref<FlowOutPut[]>([]);
//加载状态
const loading = ref(true);
//数据状态模型
const dataStateModel = ref<UpdateDataStateInput>({
  Ids: [],
  DataState: DataStateEnum.Enable,
});
//抽屉模型
const drawerModel = reactive({
  isVisibles: false,
  dialogTitle: "",
  flowId: "",
});
//预览抽屉模型
const preViewFlowModel = reactive({
  isVisibles: false,
  dialogTitle: "",
  flowId: "",
});

//分页
const page = reactive<basePageModel>({
  currentPage: pageCofing.currentPage,
  pageSize: pageCofing.pageSize,
  total: pageCofing.total,
});

//获取流程数据
const GetAllFlowMsg = async () => {
  GetAllFlow({
    currentPage: page.currentPage,
    pageSize: page.pageSize,
  })
    .then(({ data, code, total, msg }) => {
      if (code == 200) {
        tableData.value = data;
        page.total = total;
      } else {
        ElMessage.warning(msg);
      }
      loading.value = false;
      updateKey.value++;
    })
    .catch((_res) => {
      loading.value = false;
    });
};

//分页点击事件
const pageClick = function (basePageModel: basePageModel) {
  page.currentPage = basePageModel.currentPage;
  page.pageSize = basePageModel.pageSize;
  GetAllFlowMsg();
};

//定义列
const columns = ref<any>([]);

//菜单列
const GetMenuColsByMenuIdMsg = async () => {
  columns.value = await GetMenuColsByMenuId();
  if (columns.value.length > 0) {
    GetAllFlowMsg();
  } else {
    loading.value = false;
    columns.value = [];
  }
};

//新增
const buttonClick = function () {
  drawerModel.isVisibles = true;
  drawerModel.dialogTitle = "新增流程";
  drawerModel.flowId = "";
};

//编辑
const handleEdit = function (model: FlowOutPut) {
  drawerModel.isVisibles = true;
  drawerModel.dialogTitle = "编辑【" + model.FlowName + "】流程";
  drawerModel.flowId = model.FlowId;
};

//预览
const previewFlowClick = function (model: FlowOutPut) {
  preViewFlowModel.isVisibles = true;
  preViewFlowModel.dialogTitle = "预览【" + model.FlowName + "】流程";
  preViewFlowModel.flowId = model.FlowId;
};

//复选框事件
const SelectionChange = (val: FlowOutPut[]) => {
  selectedRows.value = val;
};

//启用事件
const enableFlowClick = function () {
  if (selectedRows.value.length == 0) {
    ElMessage({
      message: "请选择一条数据进行操作",
      type: "warning",
    });
  } else {
    dataStateModel.value.Ids = selectedRows.value.map((f) => f.FlowId);
    dataStateModel.value.DataState = DataStateEnum.Enable;
    setUpdateData();
  }
};

//停用事件
const closeFlowClick = function () {
  if (selectedRows.value.length == 0) {
    ElMessage({
      message: "请选择一条数据进行操作",
      type: "warning",
    });
  } else {
    dataStateModel.value.Ids = selectedRows.value.map((f) => f.FlowId);
    dataStateModel.value.DataState = DataStateEnum.Stop;
    setUpdateData();
  }
};

//删除事件
const deleteFlowClick = function (flowId: string) {
  dataStateModel.value.Ids = [];
  dataStateModel.value.DataState = DataStateEnum.Enable;
  if (flowId.length == 0) {
    ElMessage({
      message: "请选择数据进行操作",
      type: "warning",
    });
  } else {
    dataStateModel.value.Ids.push(flowId);
    dataStateModel.value.DataState = DataStateEnum.Delete;
    setUpdateData();
  }
};

//设置更新数据
const setUpdateData = function () {
  const title = ref<string>("");
  if (dataStateModel.value.DataState === DataStateEnum.Enable) {
    title.value = "你确认要启用选中数据？";
  }
  if (dataStateModel.value.DataState === DataStateEnum.Stop) {
    title.value = "你确认要停用选中数据？";
  }
  if (dataStateModel.value.DataState === DataStateEnum.Delete) {
    title.value = "你确认要删除选中数据？";
  }

  ElMessageBox.confirm(title.value, "提示消息", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      UpdateFormDataStateMsg();
    })
    .catch(() => {
      //取消
    });
};

//更新数据状态
const UpdateFormDataStateMsg = function () {
  UpdateFlowDataState(dataStateModel.value).then(({ code, msg }) => {
    if (code == 200) {
      GetAllFlowMsg();
      ElMessage.success(msg);
    }
  });
};

//关闭弹出层
const colosClick = function () {
  drawerModel.isVisibles = false;
  GetAllFlowMsg();
};

//关闭预览
const closePreClick = function () {
  preViewFlowModel.isVisibles = false;
  GetAllFlowMsg();
};
</script>
